<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>文明积分</title>
    <meta name="page-view-size" content="1280*720">
    <link rel="stylesheet" href="../css/base.css">
    <script type="text/javascript" src="../lib/js/evm.js"></script>
    <script type="text/javascript" src="../lib/js/Evm_djyw.js"></script>
    <script type="text/javascript" src="../lib/js/key.js"></script>
    <script src="../lib/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/api.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/md5.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .integral-bg {
            width: 1280px;
            height: 720px;
            position: relative;
            top: 0;
            left: 0;
            background: url(../images/bg.png) no-repeat left top;
        }

        .nav-bg {
            width: 1000px;
            height: 60px;
            position: absolute;
            top: 130px;
            left: 80px;
            padding: 0 60px 0 60px;
        }

        .nav {
            width: 50%;
            height: 100%;
            color: #F99F26;
            font-size: 28px;
            text-align: center;
            line-height: 40px;
            float: left;
        }

        .list-bg {
            position: absolute;
            padding: 15px;
            top: 207px;
            left: 80px;
            width: 1120px;
            height: 467px;
            background: rgba(39, 79, 193, .1);
            border-radius: 10px;
            box-sizing: border-box;
        }

        .list-con {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .list-con>h1 {
            text-align: center;
            width: 100%;
            line-height: 280px;
            font-size: 55px;
            color: #f2f2f2;
        }

        .table-title,
        .list-row {
            color: #fff;
            width: 90%;
            margin-left: 5%;
            height: 50px;
            font-size: 22px;
            line-height: 50px;
            /* border-bottom: 1px solid #fff; */
            box-sizing: border-box;
            border: 3px solid transparent;
        }

        .table-title {
            border-bottom: 1px solid #333;
        }

        .table-title>p,
        .list-row>p {
            float: left;
            width: 50%;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: white;
        }

        .list-row>p:first-child,
        .table-title>p:first-child {
            width: 30%;
        }

        .list-row>p:last-child,
        .table-title>p:last-child {
            width: 20%;
            float: right;
        }

        /* .list-row {
            border: none;
        } */

        .list-row.active {
            border: 3px solid lightgreen;
            border-radius: 30px;
        }

        /* .list-row+.list-row {
            border-top: 1px solid #999;
        } */

        .user-mess {
            height: 90px;
            margin-bottom: 8px;
            /* border: 1px solid red; */
            width: 90%;
            margin-left: 5%;
        }

        .user-mess>img {
            height: 100%;
            display: block;
            float: left;
        }

        .user-mess>p {
            color: white;
            line-height: 90px;
            font-size: 28px;
            float: left;
            margin-left: 15px;
        }

        .user-mess>p:last-child {
            float: right;
            margin-right: 15px;
            color: white;
            font-size: 42px;
            font-weight: bold;
        }

        .focus_menu {
            background: url('../images/title-active.png') no-repeat bottom center;
            /* background-size: 96%; */
            color: #EB4848;
        }

        .list-img {
            float: left;
            /* display: none; */
            border: 3px solid transparent;
            box-sizing: border-box;
            border-radius: 10px;
        }

        .list-img.active {
            border: 3px solid lightgreen;
        }
    </style>
</head>

<body>
    <div class="integral-bg" id="integralMain">
        <ul class="nav-bg" id="nav-bg">

        </ul>
        <div class="list-bg">
            <div class="list-con" id="list-con"></div>
            <p class="page-show"><span id="now_page">0</span>/<span id="total_page">0</span>
            </p>
        </div>

    </div>

    </div>



</body>
<script>
    var modelIndex = {
        index: 0,//导航栏初始位置
        menuKey: '',
        menuPageSize: 3, //导航栏模块数量
        pageSize: 1, //主模块数量
        type: '',
        crumbs: '文明积分',
        structure: 2,//上下结构  默认1是左右，2是上下结构
        menuContainerId: 'nav-bg',//包含导航栏模块的标签id
        menuListName: 'nav',//导航栏模块名称class
        mainContainerId: 'list-con',//包含主模块的标签id
        mainlistName: '', //主模块名称
        id: 'integral',
    }

    var leftData = [
    {
            name: ' 积分明细',//name
            id: '2',//唯一标识
            type_style: '1',//类别
            size: '5',//数量  
            list_name: 'list-row',//右侧模块classname
        },
        {
            name: '积分规则',//name
            id: '1',//唯一标识
            type_style: '2',//类别
            size: '1',//数量  
            list_name: 'list-img'//右侧模块classname
        },
        
        // {
        //     name: '积分查询',//name
        //     id: '3',//唯一标识
        //     type_style: '1',//类别
        //     size: '7',//数量  
        //     list_name: 'list-row',//右侧模块classname
        // }
    ];
    function getMenus(page, number) {
        if (typeof number == 'number') {
            // modelIndex.mainContainerId = leftData[number].list_name;
        }
        left.paint(page, number);
    }

    function getMessage(id, page, pos, index) {//id,类型，页码，上下页，位置
        var access_token = $.cookie('TV_CST_TOKEN');
        var params = {
            // cid: id,
            page: page,
            pagesize: modelIndex.pageSize,
            access_token:access_token,
            // area_id: $.cookie('TV_CST_AREA')
        }
        console.log(id, page, pos, index)
        if (id == 1) {

            var str = '';
            str = '<img  class="' + modelIndex.mainlistName + '" src="../images/integral' + page + '.png">'

            $('#' + modelIndex.mainContainerId).html(str);
            MessOpt(page, 3, pos, index);
        } else {

            GetDatas('integralLog', params, function (res, data) {
                // console.log(data)
                if (data.code == 10009) {
                    TV.userLogin();
                    getMessage(id, page, pos, index);
                    // TV.PromptMsg("请重新登录")
                    // setTimeout(function () {
                    //     window.location.href = 'login.html'
                    // }, 1000);
                    // window.location.href = 'index.html'
                } else {


                    var mess = data.data;
                    var str = '';
                    console.log(mess)
                    $('.page-show').css('display', 'none')
                    if (mess.items.length) {
                        if (modelIndex.mainlistName == 'list-row') {
                            if (id == 2) {
                                // console.log(mess.scores,111111111111)
                                var username = $.cookie('TV_CST_NAME');
                                var userImg = $.cookie('TV_CST_HEADIMG');
                                // var integral = $.cookie('TV_CST_INTEGRAL');
                                str += '<div class="user-mess"><img src="' + userImg + '"><p>' + username +
                                    '</p><p>积分：' + mess.scores + '</p></div>'
                            }
                            str += '<div class="table-title"><p>时间</p><p>积分类型</p><p>积分数</p></div>'
                            for (var i = 0; i < mess.items.length; i++) {
                                var score = mess.items[i].scores;
                                str += '<div class="' + modelIndex.mainlistName + '" data-id=' + mess.items[i]
                                    .id + " data-tpe=" + mess.items[i].tpe + " >";
                                str += '<p>' + mess.items[i].format_create_at + '</p><p>' + mess.items[i].note +
                                    '</p>'
                                if (score > 0) {
                                    str += '<p>+' + score + '</p>'
                                } else {
                                    str += '<p>' + mess.items[i].scores + '</p>'
                                }

                                str += '</div>'
                            }
                            $('.page-show').css('display', 'block')
                        }
                        $('.page-show').css('display', 'block')

                    }
                    else {
                        str = '<h1>暂无数据</h1>'
                    }
                }
                $('#' + modelIndex.mainContainerId).html(str);
                MessOpt(page, mess.totalpage, pos, index);
            })
        }

    }
    function direEnter(status, id, index) {
        var tpe = $('.active').attr('data-tpe');
        if (tpe == 4 || tpe == 5) {
            window.location.href = 'play.html?id=' + $('.active').attr('data-id');
        } else if (tpe == 1 || tpe == 2 || tpe == 3) {
            // if (tpe == 3) {
            //     window.location.href = './carrousel.html?id=' + $('.active').attr('data-id')
            //     return
            // }
            var locaName = tpe == 1 ? 'word' : 'article'
            window.location.href = locaName + 'Detail.html?id=' + $('.active').attr('data-id') + '&type=' + $('.focus_menu').attr('data-id');
        }

    }
</script>
<script type="text/javascript" src="../js/twoPageList.js"></script>

</html>